<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>view</title>
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/testvideo.css">
    <link rel="stylesheet" href="/static/css/swiper.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>

<body>
    <div class="main">
        <img class="logo" src="/static/images/hwlogo.png" alt="">
        <img class="title" src="/static/images/title.png" alt="">
        <img class="product" src="/static/images/product.png" alt="">
        <div class="video_box">
            <div class="video_content">
                <div class="video_fps" id='fpswapper' hidden>
                    <p><span> channel name: {{ channel_name }} </span> <span>&nbsp;&nbsp;&nbsp;&nbsp;fps:</span><span
                            id='fpsval'></span></p>
                </div>
                <div class="video_inner">
                    <img src="/static/images/loading.gif" id="loading" board="1" alt="" />
                    <!-- <img  id = "load_media" hidden   width = "1024px" board = "1" alt=""/> -->
                    <canvas id="canvas"></canvas>
                </div>
            </div>
        </div>
        <div class="styleBox">
            <div class="swiper-container0">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="imgStyle" data-style="0" src="/static/images/img-style1.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="imgStyle" data-style="1" src="/static/images/img-style2.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="imgStyle" data-style="2" src="/static/images/img-style3.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img class="imgStyle" data-style="3" src="/static/images/img-style4.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <p class="styleTips">毕加索风格</p>
        <img class="tips" src="/static/images/tips.png" alt="">
    </div>
</body>
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/swiper.min.js"></script>
<script>
    let upDataStyle = 0;
    var swiper = new Swiper('.swiper-container0', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        loop: true,
        spaceBetween: 0,
        onSlideChangeEnd: function (swiper) {
            // alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
            let styleTipsId = $('.swiper-slide-active img').attr('data-style')
            if (styleTipsId == 0) {
                $('.styleTips').html('毕加索风格')
            } else if (styleTipsId == 1) {
                $('.styleTips').html('糖果风格')
            } else if (styleTipsId == 2) {
                $('.styleTips').html('星空风格')
            } else if (styleTipsId == 3) {
                $('.styleTips').html('工农兵风格')
            }
        }
    });
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")
    $('#fpswapper').hide()
    $('#loading').hide()
    $(document).on("click", ".swiper-slide-active img", function () {
        upDataStyle = $(this).attr("data-style")
        console.log(upDataStyle)
    })
    function startViewVideo() {
        $('#loading').show()
        $('#canvas').hide()

        var image = new Image();
        var wsProtocol = "ws://";
        if (window.location.protocol == "https:") {
            wsProtocol = "wss://";
        }
        var wsUrl = wsProtocol + window.location.host + "/websocket?req={{req}}&name={{channel_name}}";
        var ws = new WebSocket(wsUrl);
        var onmessageflag = false;

        ws.onopen = function () {
            ws.send('next;style_id:' + upDataStyle);
        };
        var count = 0;
        var timestart = 0;

        ws.onmessage = function (evt) {
            $('#loading').hide()
            $('#canvas').show()
            var data = JSON.parse(evt.data)
            var rectangles = []
            if ('ok' == data['status']) {
                $('#fpsval').text(data.fps);
                $('#loading').hide();
                // $('#load_media').show();
                var src = "data:image/jpeg;base64," + data['image'];
                // $('#load_media').attr('src', src);
                if (data['type'] == 'video') {
                    // $('#fpswapper').show();  // comment fps show
                    rectangles = data['rectangle_list']
                }
                var wantedWidth = 1024
                var img = new Image()
                img.src = src
                img.onload = function () {
                    scale_factor = wantedWidth / img.width
                    canvas.setAttribute("width", 1024)
                    canvas.setAttribute("height", img.height * scale_factor)
                    ctx.strokeStyle = "yellow"
                    ctx.font = "30px serif"
                    ctx.fillStyle = "yellow"
                    ctx.strokeStyle = "yellow"
                    ctx.font = "30px serif"
                    ctx.fillStyle = "yellow"
                    ctx.drawImage(img, 0, 0, wantedWidth, img.height * scale_factor)
                    for (var index in rectangles) {
                        var pos = rectangles[index].slice(0, 4)  //
                        for (var i in pos) {
                            pos[i] = pos[i] * scale_factor
                        }
                        var msg = rectangles[index].slice(4, 5)
                        //add space between msg and face
                        //if upper space is not enough show the msg at the bottom
                        if (50 > pos[1]) {
                            ctx.fillText(msg, pos[0], pos[3] + 50)
                        }
                        else {
                            ctx.fillText(msg, pos[0], pos[1] - 10)
                        }
                        ctx.beginPath()
                        // 1/3 space draw line
                        ctx.moveTo(pos[0], pos[1])
                        ctx.lineTo(pos[0], pos[3] / 3 + pos[1] * 2 / 3)
                        ctx.moveTo(pos[0], pos[3] * 2 / 3 + pos[1] / 3)
                        ctx.lineTo(pos[0], pos[3])
                        ctx.lineTo(pos[0] * 2 / 3 + pos[2] / 3, pos[3])
                        ctx.moveTo(pos[0] / 3 + pos[2] * 2 / 3, pos[3])
                        ctx.lineTo(pos[2], pos[3])
                        ctx.lineTo(pos[2], pos[3] * 2 / 3 + pos[1] / 3)
                        ctx.moveTo(pos[2], pos[3] / 3 + pos[1] * 2 / 3)
                        ctx.lineTo(pos[2], pos[1])
                        ctx.lineTo(pos[2] * 2 / 3 + pos[0] / 3, pos[1])
                        ctx.moveTo(pos[0] * 2 / 3 + pos[2] / 3, pos[1])
                        ctx.lineTo(pos[0], pos[1])
                        ctx.stroke()
                    }
                }
            }
            ws.send('next;style_id:' + upDataStyle);
        }
    }
    startViewVideo();

</script>

</html>